<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>收藏列表</title>
<style type="text/css">
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	color: #2c3e50;
}

.video-grid {
	display: grid;
	gap: 1rem;
}

@media ( min-width : 768px) {
	body {
		font-size: 1rem; /* 基于根元素的字体大小 */
	}
	.video-grid {
		font-size: 1rem; /* 基于根元素的字体大小 */
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: repeat(2, auto);
	}
	.pagination {
	padding: 1em;
		font-size: 1rem; /* 基于根元素的字体大小 */
		text-align: center;
		
	}
	.search {
		font-size: 2em; /* 基于根元素的字体大小 */
	}
	button, input {
		font-size: 1rem; /* 基于根元素的字体大小 */
	}
}

@media ( max-width : 767px) {
	body {
		font-size: 0.5rem; /* 基于根元素的字体大小 */
	}
	.video-grid {
		font-size: 1em; /* 基于根元素的字体大小 */
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(5, auto);
	}
	.pagination {
	padding: 1em;
		font-size: 1em; /* 基于根元素的字体大小 */
		text-align: center;
	}
	button, input {
		font-size: 1em; /* 基于根元素的字体大小 */
	}
}

.url-item {
	background: rgba(0,0,0,.35);
	color: #fff;
	border: 1px solid #ccc;
	padding: 1em;
	text-align: left;
}

.video-content {
	text-align: center;
}
a {
  color: inherit;      /* 继承父元素的文字颜色 */
  text-decoration: none; /* 可选：去掉下划线 */
}

</style>
</head>
<body style="background: url(bg02.jpg) no-repeat top left;backgroundsize:cover;background-attachment: fixed;background-size: 100%;">
	<div id="app">
		<div class="pagination">
			<button @click="change" class="search" title="切换目录">{{ path }}</button>
			<input type="text" v-model="query" class="search"
				@change="fetchUrls(currentPage)" /> <input type="text" v-if="false"
				v-model="tags" @change="fetchUrls(currentPage)" />
			<button @click="create" class="search">添加网址</button>
		</div>
		<div class="video-grid">
			<div v-for="(item, index) in urls" :key="index" class="url-item">
					<a :href="item.url" target="_blank">
				<div class="video-content" :title="item.desc"> {{ item.name }} </div>
				</a>
			</div>
		</div>

		<div class="pagination">
			<button @click="prevPage" :disabled="currentPage === 1">上页</button>
			<span>第 <input type="text" v-model="currentPage" maxlength="6"
				@change="fetchVideos(currentPage)" /> 页 / 共 {{ totalPages }} 页
				| {{ perPage }}条/页
			</span>
			<button @click="nextPage" :disabled="currentPage === totalPages">下页</button>
		</div>

	</div>

	<script src="vue@2.js"></script>
	<script src="axios.min.js"></script>
	<script>
    new Vue({
      el: '#app',
      data() {
        return {
          urls: [],
          total: 0,
          perPage: 40,
          currentPage: 1,
          totalPages: 0,
          query: "",
          tags: "",
          path: "default",
          formData: {
            name: '',
            url: '',
            desc: ''
          },
          showSuccessMessage: false
        };
      },
      methods: {
    	  getPath() {
    		  return localStorage.getItem("path") || "default";
    	  },
    	  change() {
    		  let path = prompt("请输入切换的目录路径：", localStorage.getItem("path"));
    		  if (path !== null) {
	    		  localStorage.setItem("path", path);
	    		  this.path = path;
	    		  this.fetchUrls(this.currentPage);
    		  }
    	  },
        fetchUrls(page = 1) {
          axios.get('/urls/'+this.getPath()+'?size='+this.perPage+'&page='+page + '&query='+this.query+'&tags='+this.tags)
            .then(response => {
              this.urls = response.data.urls;
              this.total = response.data.total;
              this.perPage = response.data.perPage;
              this.currentPage = response.data.currentPage;
              this.totalPages = Math.ceil(this.total / this.perPage);
            })
            .catch(error => {
              console.error('Error fetching videos:', error);
            });
        },
        prevPage() {
          if (this.currentPage > 1) {
            this.fetchUrls(this.currentPage - 1);
          }
        },
        nextPage() {
          if (this.currentPage < this.totalPages) {
            this.fetchUrls(this.currentPage + 1);
          }
        },
        create() {
        	window.open("create.html", "_blank");
        },
        setDefaultImage(e) {
          e.target.src = "no.jpg";
        }
      },
      created() {
    	this.path = this.getPath();
    	console.log(this.path);
        this.fetchUrls();
      }
    });
  </script>
</body>
</html>
